<template>
<!--    <div>IconView</div>-->
<!--    <svg class="bi bi-alarm-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">-->
<!--        <path fill-rule="evenodd" d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V1H5.999a.5.5 0 0 1-.5-.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1zm-5 4a.5.5 0 0 0-1 0v3.882l-1.447 2.894a.5.5 0 1 0 .894.448l1.5-3A.5.5 0 0 0 8.5 9V5z"/>-->
<!--    </svg>-->
    <h1 class="row-title">普通引入</h1>
    <div class="row">
        <XiaoQuan-Icon :key="item" v-for="item in iconList" :icon="item"/>
    </div>
    <h1 class="row-title">设置不同大小</h1>
    <div class="row">
        <XiaoQuan-Icon icon="user-secret" size="2xs"/>
        <XiaoQuan-Icon icon="bars" size="xs"/>
        <XiaoQuan-Icon icon="shield-halved" size="sm"/>
        <XiaoQuan-Icon icon="file" size="lg"/>
        <XiaoQuan-Icon icon="filter" size="xl"/>
        <XiaoQuan-Icon icon="gear" size="2xl"/>
        <XiaoQuan-Icon icon="barcode" size="2x"/>
        <XiaoQuan-Icon icon="folder" size="3x"/>
        <XiaoQuan-Icon icon="folder-open" size="4x"/>
    </div>
    <h1 class="row-title">旋转与翻转</h1>
    <div class="row">
        <XiaoQuan-Icon icon="user-secret" rotation="90" size="xl"/>
        <XiaoQuan-Icon icon="bars" :rotation="270" size="xl"/>
        <XiaoQuan-Icon icon="shield-halved" rotation="180" size="xl"/>
        <XiaoQuan-Icon icon="file" flip="horizontal" size="xl"/>
        <XiaoQuan-Icon icon="filter" flip="vertical" size="xl"/>
        <XiaoQuan-Icon icon="folder-open" flip="both" size="xl"/>
    </div>
    <h1 class="row-title">动画效果</h1>
    <div class="row">
        <XiaoQuan-Icon icon="user-secret" size="xl" beat />
        <XiaoQuan-Icon icon="bars" size="xl" beat-fade />
        <XiaoQuan-Icon icon="shield-halved" size="xl" bounce />
        <XiaoQuan-Icon icon="file" size="xl" fade />
        <XiaoQuan-Icon icon="filter" size="xl" flip />
        <XiaoQuan-Icon icon="gear" size="xl" shake />
        <XiaoQuan-Icon icon="barcode" size="xl" spin />
        <XiaoQuan-Icon icon="folder" size="xl" spin spin-reverse />
        <XiaoQuan-Icon icon="folder-open" size="xl" spin-pulse />
    </div>
    <h1 class="row-title">添加自定义属性</h1>
    <div class="row">
        <XiaoQuan-Icon icon="user-secret" size="xl" type="primary" />
        <XiaoQuan-Icon icon="bars" size="xl" type="success" />
        <XiaoQuan-Icon icon="shield-halved" size="xl" type="info" />
        <XiaoQuan-Icon icon="file" size="xl" type="warning" />
        <XiaoQuan-Icon icon="filter" size="xl" type="danger" />
        <XiaoQuan-Icon icon="gear" size="xl" color="#e47412" />
        <XiaoQuan-Icon icon="barcode" size="xl" color="#7ec102" />
        <XiaoQuan-Icon icon="folder" size="xl" color="skyblue" />
        <XiaoQuan-Icon icon="folder-open" size="xl" color="rgba(122, 122, 122, .5)" />
    </div>
</template>

<script setup>
    const iconList = ['user-secret', 'bars', 'shield-halved', 'file', 'filter', 'gear', 'barcode', 'folder', 'folder-open'];
</script>


<style lang="scss" scoped>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
